// ==========================================================================
// ENDPOINT CONFIG PAGE
// ==========================================================================

.section-header-flex-container {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.inline-header{
  display: inline;
}

.inline-icon {
  font-size: 32px;
}

.inline-icon--endpoint {
  margin-left: -5px;
  margin-right: $spacer-x/2;
}

.endpoint-config-left-margin {
  margin-left: 45px;
}

.wp-note--mild-emphasis {
  font-weight: 500;
}

.gf-form-natural-language-input {
  padding-left: 10px;
  margin-left: 5px;
}

.wp-config-box--hit-area {
  cursor: pointer;
  &:hover {
  }
}

.wp-config-box {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 500ms;
  -o-transition: max-height 500ms;
  -moz-transition: max-height 500ms;
  -webkit-transition: max-height 500ms;

  &.dns-open {
    max-height: 1250px;
    padding-bottom: 50px;
  }

  &.ping-open {
    max-height: 1250px;
    padding-bottom: 50px;
  }

  &.http-open {
    max-height: 1250px;
    padding-bottom: 50px;
  }

  &.https-open {
    max-height: 1250px;
    padding-bottom: 50px;
  }

  &.destroy-open {
    max-height: 300px;
  }
}

.gf-form-group--header {
  margin-bottom: 5px;
}

.message-header {
  margin-bottom: $spacer-y;
}

.message-content {
  margin-bottom: $spacer-y*2;
}


.creating-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.creating-body-copy {
  text-align: center;
  margin-bottom: $spacer*2;
}

.wp-creating-button--transition {
  transition: all 500ms ease-in-out;
}

.wp-creating-button--transition.wp-button-disabled {
  width: 120px;
}

.wp-creating-button--transition.wp-button-success {
  width: 225px;
}

.wp-button-text--TextAppear {
  animation: TextAppear 200ms 2s linear forward;
}

@keyframes TextAppear {
    0% {
        display: none;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    };
}

.wp-cursor--wait {
  cursor: wait;
}

.endpoint-config--checks-exceeded {
  font-size: $font-size-sm;
  color: $brand-danger;
}

// worldSpin Animation
.rt-spin-dot {
    background-image: url("/public/plugins/raintank-worldping-app/img/worldping_dot.svg");
    opacity: 1;
    width: 21px;
    height: 21px;
    margin: 0 auto;
    position: absolute;
    top: 47px;
    left: 47px;
    transform: translateX(75px);
}

.rt-spin-dot--10s {
  animation: spinDot 10s infinite linear;
}

.rt-spin-dot--30s {
  animation: spinDot 30s infinite linear;
}

.rt-spin-dot--60s {
  animation: spinDot 60s infinite linear;
}

.rt-spin-dot--120s {
  animation: spinDot 120s infinite linear;
}

.rt-world {
    background-image: url("/public/plugins/raintank-worldping-app/img/worldping_map.svg");
    background-repeat: repeat;
    background-position: 0 -60px;
    opacity: 1;
    width: 120px;
    height: 120px;
    margin: $spacer*3 0;
    position: relative;
    border-radius: 50%;
    border: 2px solid #666766;

    transition: transform 200ms linear;
    transform-style: preserve-3d;
    animation: moveWorld 15s linear infinite;
}

@keyframes moveWorld {
    0% {background-position: 0 -60px;}
    100% {background-position: 300px -60px;}
}

@keyframes spinDot {
    0% {
        opacity: .5;
        transform: rotate(-60deg) translateX(75px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .5;
        transform: rotate(300deg) translateX(75px);
    };
}
